<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学成在线</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <!-- 头部区域 -->
  <header class="header container clearfix">
    <!-- logo -->
    <div class="logo clearfix">
      <img src="./images/学成在线.png" alt="">
    </div>
    <!-- 导航栏 -->
    <ul>
      <li class="active">首页</li>
      <li>课程</li>
      <li>职业规划</li>
    </ul>
    <!-- 搜索栏 -->
    <div class="search">
      <input type="text" placeholder=" 请输入关键字">
      <span>☁</span>
    </div>
    <!-- 用户头像 -->
    <div class="username">
      <img src="./images/20130502185029_EkKYh拷贝.png" alt="">
      <p>qq-leishui</p>
    </div>
  </header>
  <!-- 横幅 -->
  <div class="banner">
    <div class="banner_main container">
      <!-- 侧边栏 -->
      <ul>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
        <li>前端开发<span>></span></li>
      </ul>
      <div class="schedule r">
        <h3>我的课表</h3>
        <div class="todo">
          <p>继续学习 程序语言设计<br><span class="mini_text">正在学习-使用对象</span></p>
        </div>
        <div class="todo">
          <p>继续学习 程序语言设计<br><span class="mini_text">正在学习-使用对象</span></p>
        </div>
        <div class="todo">
          <p>继续学习 程序语言设计<br><span class="mini_text">正在学习-使用对象</span></p>
        </div>
        <div class="btnall">全部课程</div>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <nav class="container">
    <ul class="l">
      <li>精品推荐</li>
      <li>MySql</li>
      <li>MySql</li>
      <li>MySql</li>
      <li>MySql</li>
      <li>MySql</li>
      <li>MySql</li>
    </ul>
    <span class="r">修改兴趣</span>
  </nav>
  <!-- 商品模块 -->
  <div class="goods clearfix container">
    <div class="goods_label">
      精品推荐
    </div>
    <div class="goods_module">
      <ul>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
        <li><img src="./images/图层133.png" alt="">
          <p>Think PHP 5.0 博客系统实战项目演练 </p>
          <span>高级<i> • 1125人在学习</i></span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 底部模块 -->
  <footer>
    <div class="container">
      <div class="box-l l">
        <img src="./images/学成在线.png" alt="">
        <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
        <i>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</i>
        <button>下载app</button>
      </div>
      <div class="box-r r">
        <ul>
          <li>
            <dl>
              <dt>关于学成网</dt>
              <dd>关于</dd>
              <dd>管理团队</dd>
              <dd>工作机会</dd>
              <dd>客户服务</dd>
              <dd>帮助</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>关于学成网</dt>
              <dd>关于</dd>
              <dd>管理团队</dd>
              <dd>工作机会</dd>
              <dd>客户服务</dd>
              <dd>帮助</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>关于学成网</dt>
              <dd>关于</dd>
              <dd>管理团队</dd>
              <dd>工作机会</dd>
              <dd>客户服务</dd>
              <dd>帮助</dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</body>

</html>